<template>
  <div id="oter">
    <div class="page-tabbar" @click ="aaa">
      <div class="page-wrap">
        <div class="hear">
          <mt-cell class="page-part" :title="selected" />
        </div>
  
    <!-- tabcontainer -->
        <mt-tab-container class="page-tabbar-container" v-model="selected">
          <mt-tab-container-item id="多采科技">
            <casus></casus>
          </mt-tab-container-item>
          <mt-tab-container-item id="广告服务">
            <img src="http://pic.58pic.com/58pic/11/68/32/08658PICred.jpg" alt="">
            <advertising></advertising>
          </mt-tab-container-item>
          <mt-tab-container-item id="成功案例">
           <img src="http://pic.nipic.com/2008-05-06/200856201542395_2.jpg" alt="">
          </mt-tab-container-item>
          <mt-tab-container-item id="关于我们">
            <div class="page-part">
              <img src="http://pic.58pic.com/58pic/11/68/32/08658PICred.jpg" alt="">
            </div>
            <router-link to="/">
        <!-- button -->
              <mt-button type="danger" size="large">退出</mt-button>
            </router-link>
          </mt-tab-container-item>
        </mt-tab-container>
      </div>

      <mt-tabbar v-model="selected" fixed>
        <mt-tab-item id="多采科技">
          <i class="iconfont icon-shouye1"></i>
          <p>首页</p>
        </mt-tab-item>
        <mt-tab-item id="广告服务">
          <i class="iconfont icon-shangcheng"></i>
          <p>服务</p>
        </mt-tab-item>
        <mt-tab-item id="成功案例">
          <i class="iconfont icon-mingpian"></i>
          <p>案例</p>
        </mt-tab-item>
        <mt-tab-item id="关于我们">
         <i class="iconfont icon-wode3"></i>
         <p>关于我们</p>
        </mt-tab-item>
      </mt-tabbar>
    </div>
  </div>
</template>

<script>
import casus from '@/components/casus'
import advertising from '@/components/advertising'
export default {
  name: "page-tabbar",
   components: {
    casus,advertising
  },
  data() {
    return {
      selected: "多采科技"
    };
  },

  methods: {
    aaa() {
      // Toast({
      //   message: "提示",
      //   position: "bottom",
      //   duration: 5000
      // });
      console.log(321);
    }
  }
};
</script>
 
<style  scoped>
.hear {
  box-shadow:0px 0px 8px #333333;
  margin-bottom: 8px;
  font-weight: 700;
  position: fixed;
  top: 0px;
  width: 100%;
}
.page-tabbar {
  overflow: hidden;
}
.page-tabbar-container {
  padding-bottom: 81px;
  padding-top: 48px;
}
.page-wrap {
  overflow: auto;
  height: 100%;
  padding-bottom: 100px;
}
.iconfont {
  text-align: center;
  line-height: 55px;
  font-size: 22px;
  color: #999;
}
img {
  width: 100%;
}
</style>
